<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
</head>
<body>
<form method="post" class="definewidth m20" id="myForm">
<input type="hidden" id="m_id" name="m_id" value="" />
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">资源名称</td>
            <td><input type="text" id="m_name" name="m_name"/><input type="hidden" id="initName" name="initName"/><span id="name_res" style="color: red;margin-left: 10px"></span></td>
        </tr>
        <tr>
            <td class="tableleft">url</td>
            <td><input type="text" id="m_url" name="m_url" /><span id="url_res" style="color: red;margin-left: 10px"></span></td>
        </tr>
        <tr>
            <td class="tableleft">是否有效</td>
            <td>
                <input type="radio" name="m_state" value="0"/> 有效
              <input type="radio" name="m_state" value="1" /> 无效
            </td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button id="update" type="button" class="btn btn-primary">更新</button>&nbsp;&nbsp;<button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>

    String.prototype.GetValue= function(para) {
        let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?")+1).match(reg);
        if (r!=null) return unescape(r[2]); return null;
    }
    // 渲染查询的数据
    function loadUpdateData() {
        // 获取url 的 id
        let id = location.href.toString().GetValue("id");
        console.log(id);
        $.getJSON("/menu/"+id,null,function (data) {
            if (data.code==200){
                // 服务器响应成功
                if (data.msg=="success"){
                    let menu = data.data;
                    $("#m_name").val(menu.m_name);
                    $("#initName").val(menu.m_name);
                    $("#m_url").val(menu.m_url);
                    $("#m_id").val(menu.m_id);
                    // 渲染单选框
                    let radio = $("input[name='m_state']");
                    for (let i = 0; i < radio.length; i++) {
                        if ($(radio[i]).val()==menu.m_state) {
                            $(radio[i]).prop("checked",true);
                        }
                    }
                } else {
                    alert("网络问题，请稍后重试");
                    location.href = "index.html";
                }
            } else{
                alert("网络问题，请稍后重试");
                location.href = "index.html";
            }
        })
    }
    // 1.判断资源是否重复
    function isExistOfMenu(){
        let val = $("#m_name").val();
        if (val=='') {
            alert("请填写资源名称");
        } else {
            $.getJSON("/menu/isExistMenu/" +val ,null,function (data) {
                if (data.result=="success" && data.data.m_name != $("#initName").val() ){
                    $("#name_res").html(data.msg);
                } else{
                    $("#name_res").html("");
                }
            })
        }

    }
    // 2. url的非空验证
    function isNullOfUrl() {
        return $("#m_url").val()=='' ? true:false;
    }
    $(function () {
        loadUpdateData();
		$('#backid').click(function(){
				window.location.href="index.html";
		 });
        $("#m_name").blur(function () {
            isExistOfMenu()
        })
        // url input blur事件
        $("#m_url").blur(function () {
            if (isNullOfUrl()) {
                alert("请填写资源路径")
            }
        })
		$("#update").click(function () {
            let val = $("#m_name").val();
            if (val=='') {
                alert("请填写资源名称");
            } else {
                $.getJSON("/menu/isExistMenu/" +val ,null,function (data) {
                    if (data.result=="success" && data.data.m_name != $("#initName").val()){
                        // 资源名相同
                        $("#name_res").html(data.msg);
                    } else{
                        // 资源名验证通过
                        // 验证资源路径
                        if (!isNullOfUrl()) {
                            // 验证通过
                            // 发送ajax请求添加
                            // 获取pageIndex，pageSize
                            let params = $("#myForm").serialize();
                            console.log(params);
                            $.ajax({
                                type:"post",
                                url: "/menu",
                                data: $("#myForm").serialize()+"&_method=PUT",
                                dataType:"json",
                                success: function(data){
                                    if(data.msg=='success') {
                                        let pageIndex = location.href.GetValue("pageIndex");
                                        let pageSize = location.href.GetValue("pageSize");
                                        window.location.href = "index.html?pageIndex="+pageIndex+"&pageSize="+pageSize;
                                    }else{
                                        alert("更新失败！"+data.result);
                                    }
                                }
                            })
                        } else {
                            // 弹框提示
                            alert("请填写资源路径");
                        }
                    }
                })
            }
        })

    });

</script>